<template>
  <el-tabs defaultActiveKey="1" v-model="activeName">
    <el-tab-pane label="线条" name="线条" key="1">
      <el-row>
        <el-col :span="8">标题</el-col>
        <el-col :span="14">
          <el-input v-model="edgeAttr.label" style="width: 100%"/>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">宽度</el-col>
        <el-col :span="12">
          <el-slider :min="1" :max="5" :step="1" v-model="edgeAttr.strokeWidth"/>
        </el-col>
        <el-col :span="2">
          <div class="result">{{ edgeAttr.strokeWidth }}</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">颜色</el-col>
        <el-col :span="14">
          <el-input type="color" v-model="edgeAttr.stroke" style="width: 100%"/>
        </el-col>
      </el-row>
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
import {FlowGraph} from '../../common/FlowGraph';
import {defineComponent, reactive, watch, toRefs, ref, nextTick} from 'vue';

interface IFEdgeAttr {
  stroke: string;
  strokeWidth: number;
  label: string;
}

const props = defineProps({
  // height: {
  //   type: Number,
  //   default: () => {
  //     return 100
  //   }
  // },
  id: {
    type: String,
    required: true,
  },
})

const activeName = ref('线条')

const edgeAttr = reactive<IFEdgeAttr>({
  stroke: '#5F95FF',
  strokeWidth: 1,
  label: '',
});
const isByIdGetInfo = ref(false);
const {id} = toRefs(props);
const getEdge = (id: string) => {
  const cell = FlowGraph.graph.getCellById(id);
  if (!cell || !cell.isEdge()) {
    return null;
  }
  return cell;
};
watch(edgeAttr, () => {
  // 如果是根据 id 获取详情引起的变化则不必触发后续操作
  if (isByIdGetInfo.value) return;
  const cell = getEdge(id.value);
  if (!cell) {
    return;
  }
  cell.attr('line/strokeWidth', edgeAttr.strokeWidth);
  cell.attr('line/stroke', edgeAttr.stroke);
  cell.setLabels(edgeAttr.label);
});
watch(id, () => {
  const cell = getEdge(id.value);
  if (!cell) {
    return;
  }
  isByIdGetInfo.value = true;
  const connector = cell.getConnector() || {
    name: 'normal',
  };
  edgeAttr.stroke = cell.attr('line/stroke');
  edgeAttr.strokeWidth = cell.attr('line/strokeWidth');
  edgeAttr.label = (cell.getLabels()[0]?.attrs as any)?.label?.text || '';
  nextTick(() => {
    isByIdGetInfo.value = false;
  });
});
</script>

<style lang="scss" scoped></style>
